<template>
  <div class="hearderbox">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#445878"
      text-color="#fff"
      active-text-color="#ffd04b"
      @select="handleSelect"
    >
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-menu-item index="2">Info</el-menu-item>
      <el-menu-item index="3">Orders</el-menu-item>
      <el-menu-item index="4">4</el-menu-item>
      <el-menu-item index="5">5</el-menu-item>
      <el-menu-item index="6">8</el-menu-item>
    </el-menu>
  </div>
  <div class="contboxs">
    <router-view></router-view>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style>
.hearderbox {
  min-height: 36px;
  background: #445878;
  font-size: 20px;
  position: fixed; /* 改成 fixed 定位 */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999; /* 确保在内容之上 */
}
.el-menu-demo {
  display: flex;
  justify-content: center;
}
.contboxs {
  background: pink;
  overflow: auto;
  margin-top: 60px; /* 给内容区预留出 hearderbox 的高度，避免被遮挡 */
}
/* @media (max-width: 768px) {
  .hearderbox {
    display: none;
  }
  .contboxs {
    margin-top: 0;
  }
} */
</style>
